<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>pepada gv Roadmapper example page</title>
<meta http-equiv="content-script-type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="http://pepadagvroadmapper.googlecode.com/svn/trunk/dev/pepadarmdefault.css" />
<script type="text/javascript" src="http://pepadagvroadmapper.googlecode.com/svn/trunk/dev/pepadagvroadmapper.js"></script>


<script type="text/javascript">
function pepadalinkStyleSheet  (sn) {
	var css = document.createElement('link'); 
	css.type = 'text/css'; 
	css.rel = 'stylesheet'; 
	css.href = sn; 
	// various browser approaches
	if (document.head)
		document.head.appendChild(css);
	else
		document.getElementsByTagName("head")[0].appendChild(css);

	return css;
} 


      pepadalinkStyleSheet('pepadarmskins.css');
      pepadalinkStyleSheet('pepadarmcustom.css');
      
      google.load("visualization", "1");

      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization);

      // Called when the Visualization API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var datTable = new google.visualization.DataTable();
       


datTable.addColumn('date', 'Activate');
datTable.addColumn('date', 'Deactivate');
datTable.addColumn('string', 'Description');
datTable.addColumn('string', 'ID');
datTable.addColumn('string', 'Target');
datTable.addColumn('string', 'Custom');
datTable.addColumn('number', 'Cost');
datTable.addColumn('string', 'Callout');
datTable.addColumn('string', 'sequence');
datTable.addRows(13);

datTable.setValue(0, 0, null);
datTable.setValue(0, 1, new Date(2010,0,4));
datTable.setValue(0, 2, 'Cellphone');
datTable.setValue(0, 3, 'cell');
datTable.setValue(0, 4, 'smart');
datTable.setValue(0, 5, null);
datTable.setValue(0, 6, 200);
datTable.setValue(0, 7, 'a very old cellphone- battery now dead');
datTable.setValue(0, 8, null);

datTable.setValue(1, 0, new Date(2010,1,12));
datTable.setValue(1, 1, null);
datTable.setValue(1, 2, 'Android');
datTable.setValue(1, 3, 'android');
datTable.setValue(1, 4, 'tablet');
datTable.setValue(1, 5, null);
datTable.setValue(1, 6, 400);
datTable.setValue(1, 7, null);
datTable.setValue(1, 8, null);

datTable.setValue(2, 0, new Date(2010,0,6));
datTable.setValue(2, 1, new Date(2010,2,6));
datTable.setValue(2, 2, 'Mac');
datTable.setValue(2, 3, 'mac');
datTable.setValue(2, 4, 'iPad');
datTable.setValue(2, 5, null);
datTable.setValue(2, 6, 300);
datTable.setValue(2, 7, null);
datTable.setValue(2, 8, null);

datTable.setValue(3, 0, new Date(2010,0,1));
datTable.setValue(3, 1, new Date(2010,3,2));
datTable.setValue(3, 2, 'Windows tablet');
datTable.setValue(3, 3, 'short');
datTable.setValue(3, 4, null);
datTable.setValue(3, 5, 'dislike');
datTable.setValue(3, 6, null);
datTable.setValue(3, 7, 'this totally sucked');
datTable.setValue(3, 8, null);

datTable.setValue(4, 0, null);
datTable.setValue(4, 1, new Date(2010,2,6));
datTable.setValue(4, 2, 'PC');
datTable.setValue(4, 3, 'pc');
datTable.setValue(4, 4, 'android');
datTable.setValue(4, 5, null);
datTable.setValue(4, 6, 250);
datTable.setValue(4, 7, null);
datTable.setValue(4, 8, null);

datTable.setValue(5, 0, new Date(2010,0,1));
datTable.setValue(5, 1, new Date(2010,3,6));
datTable.setValue(5, 2, 'Netbook');
datTable.setValue(5, 3, 'net');
datTable.setValue(5, 4, 'ipad');
datTable.setValue(5, 5, 'dislike');
datTable.setValue(5, 6, 150);
datTable.setValue(5, 7, 'I really hated this thing - it was a complete waste of money');
datTable.setValue(5, 8, null);

datTable.setValue(6, 0, new Date(2010,0,1));
datTable.setValue(6, 1, new Date(2010,0,6));
datTable.setValue(6, 2, 'Smartphone');
datTable.setValue(6, 3, 'smart');
datTable.setValue(6, 4, 'iphone');
datTable.setValue(6, 5, null);
datTable.setValue(6, 6, 240);
datTable.setValue(6, 7, null);
datTable.setValue(6, 8, null);

datTable.setValue(7, 0, new Date(2010,3,2));
datTable.setValue(7, 1, null);
datTable.setValue(7, 2, 'Tablet');
datTable.setValue(7, 3, 'tablet');
datTable.setValue(7, 4, null);
datTable.setValue(7, 5, 'family');
datTable.setValue(7, 6, null);
datTable.setValue(7, 7, 'I wish i could like these better');
datTable.setValue(7, 8, null);

datTable.setValue(8, 0, null);
datTable.setValue(8, 1, new Date(2010,4,6));
datTable.setValue(8, 2, 'MP3 player');
datTable.setValue(8, 3, 'mp3');
datTable.setValue(8, 4, 'ipod');
datTable.setValue(8, 5, null);
datTable.setValue(8, 6, 20);
datTable.setValue(8, 7, null);
datTable.setValue(8, 8, null);

datTable.setValue(9, 0, new Date(2010,0,29));
datTable.setValue(9, 1, new Date(2010,1,6));
datTable.setValue(9, 2, 'Personal Video player');
datTable.setValue(9, 3, 'pv');
datTable.setValue(9, 4, 'net');
datTable.setValue(9, 5, 'dislike');
datTable.setValue(9, 6, 25);
datTable.setValue(9, 7, 'this sucked too');
datTable.setValue(9, 8, null);

datTable.setValue(10, 0, new Date(2010,3,11));
datTable.setValue(10, 1, new Date(2010,4,6));
datTable.setValue(10, 2, 'iPod');
datTable.setValue(10, 3, 'ipod');
datTable.setValue(10, 4, 'iphone');
datTable.setValue(10, 5, 'like');
datTable.setValue(10, 6, 25);
datTable.setValue(10, 7, 'And then the ipod came along');
datTable.setValue(10, 8, null);

datTable.setValue(11, 0, new Date(2010,0,1));
datTable.setValue(11, 1, null);
datTable.setValue(11, 2, 'iPhone');
datTable.setValue(11, 3, 'iphone');
datTable.setValue(11, 4, null);
datTable.setValue(11, 5, 'like');
datTable.setValue(11, 6, 360);
datTable.setValue(11, 7, null);
datTable.setValue(11, 8, null);

datTable.setValue(12, 0, new Date(2010,2,1));
datTable.setValue(12, 1, null);
datTable.setValue(12, 2, 'iPad');
datTable.setValue(12, 3, 'ipad');
datTable.setValue(12, 4, 'tablet');
datTable.setValue(12, 5, 'like');
datTable.setValue(12, 6, 480);
datTable.setValue(12, 7, null);
datTable.setValue(12, 8, null);



        // Instantiate our roadmapper object.
        var vis = new pepada.gvRoadMapper(document.getElementById('pepadaroadmap'));

        // Draw our visualization.
        vis.draw(datTable, {debug: true, height:600, width:900, tickType:'automatic', 
                               description:'generated by <i>Pepada Roadmapper</i>'});
       }
   </script>


</head>


<body style="font-family: Verdana, Tahoma, Helvetica, sans-serif;">
<h1 align="center">Pepada Roadmapper Google visualization</h1>

<div id="pepadaroadmap" class="pepadarmcontainer pepadarmskin"></div>

</body>
</html>